<template>
	<div class="home-contioner">
		<mt-swipe :auto="3000">
		  <mt-swipe-item v-for="item in lunbolist" :key="item.id">
			  <img :src="item.imgUrl"/>
		  </mt-swipe-item>
		</mt-swipe>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
					<img src="../images/menu1.png"/>
					<div class="mui-media-body">新闻资讯</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
					<img src="../images/menu2.png"/>
					<div class="mui-media-body">图片分享</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
					<img src="../images/menu3.png"/>
					<div class="mui-media-body">商品购买</div></router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
					<img src="../images/menu4.png"/>
					<div class="mui-media-body">留言反馈</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
					<img src="../images/menu5.png"/>
					<div class="mui-media-body">视频专区</div></a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
					<img src="../images/menu6.png"/>
					<div class="mui-media-body">联系我们</div></a></li>
		</ul> 
	</div>
</template>

<script>
	import { Toast } from "mint-ui";
	
	export default{
		data(){
			return {
				lunbolist:[]
			}
		},
		created() {
			this.getLunbo();
		},
		methods:{
			//获取轮播信息
			getLunbo(){
				this.$http.get("/myvue/home/lunbo").then(function(res){
					if(res.body){
						this.lunbolist = res.body;
					}else{
						// 失败的
						Toast("加载轮播图失败");
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
.mint-swipe{
	height: 200px;
	.mint-swipe-item {
	    img {
	      width: 100%;
	      height: 100%;
		  max-width:100%;
		  max-height: 100%; 
	    }
	 }
}
.mui-grid-view.mui-grid-9{
	background-color: #fff;
	.mui-table-view-cell{
		margin: 0;
		padding: 0px 15px;
		vertical-align: top;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	li{
		img{
			width: 50px;
			height: 50px;
		}
	}
	.mui-media-body{
	    font-size: 12px;
	}
}
</style>
